<template>
  <div class="underneath">
    <el-tabs v-model="activeName" type="card" class="leftCar" @tab-click="handleClick">
      <el-tab-pane label="最新消息" name="first">{{ spot_news }}</el-tab-pane>
      <el-tab-pane label="最新通知" name="second">{{ latest_notice }}</el-tab-pane>
      <el-tab-pane label="信息管理" name="third">{{ information }}</el-tab-pane>
      <el-tab-pane label="帮助中心" name="fourth">对该后台管理系统出现的技术问题请拨打:86-21-58885678</el-tab-pane>
    </el-tabs>

    <!-- 饼状图 -->
    <div id="bing" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
// import { updatePages } from '@/api/pages'
export default {
  data() {
    return {
      activeName: 'first',
      spot_news: '  政策面:料政策友好期更长,政策改善空间大,供需两端修复.从2008,2011和2014年三轮周期复盘来看,政策放松一般触发于房价环比-0.5%,收紧触发于房价环比+0.9%;三轮周期政策友好期分别为8,15和19个月,其中2014年基本面曲折型修复对应政策友好期更长.本轮周期政策放松在2021.12(-0.3%)已经触发,目前已持续7个月,目前房价环比-0.2%,预计目前仍处政策放松中前期.展望后续,我们认为本轮政策修复将呈现三大特征:1)政策友好期更长:预判本轮周期基本面或呈现曲折型修复,预计政策友好期将持平或超2014年的19个月;2)政策改善空间大:本轮周期宏观经济和房地产基本面下行压力更大,近期政策基调更为积极,需求端由“托而不举”向“逐步支持”转变;供给端由“保项目”向“保优质民企”转变,预计政策改善空间仍很大;3)供需两端修复:需求端,如四限放松,二套房首付及认定宽松,房贷利率下行,棚改房票安置扩围等,供给端,如预售资金监管优化,股权融资,三条红线优化,商业地产REITs等',
      latest_notice: '  近日，国家统计局公布了5月房价数据，根据数据可以了解到，5月份全国70个城市新房价格指数环比涨幅为-0.2%，二手住宅价格指数环比涨幅为-0.4%，这组数据也反映了新房、二手房价格都在下跌。那2022全国房价下跌最新消息是怎样的？房价最近为什么跌得这么厉害呢？看详细原因如下1.原因一：房地产调控放松, 2.原因一：受疫情影响',
      information: '  随着时代的发展,各项管理工作越来越细化,也越来越专业化。房产管理工作发展的更加多元化,与各部门之间工作的协作也更加深入化。房产管理工作已不再是单纯的房屋管理,而是包括了办公用房管理、住宅管理、维修基金管理、公积金管理、各种补贴的发放、各种费用的报销等等。'
    }
  },
  // async created() {
  //   const res = await updatePages()
  //   console.log(25, res)
  // },
  //   饼状图
  mounted() {
    var chartDom = document.getElementById('bing')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      title: {
        text: '房产数量比例',
        subtext: 'real Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: [
          'rose1',
          'rose2',
          'rose3',
          'rose4',
          'rose5',
          'rose6',
          'rose7',
          'rose8'
        ]
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [

        {
          name: 'Area Mode',
          type: 'pie',
          radius: [20, 140],
          center: ['75%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: [
            { value: 30, name: 'rose 1' },
            { value: 28, name: 'rose 2' },
            { value: 26, name: 'rose 3' },
            { value: 24, name: 'rose 4' },
            { value: 22, name: 'rose 5' },
            { value: 20, name: 'rose 6' },
            { value: 18, name: 'rose 7' },
            { value: 16, name: 'rose 8' }
          ]
        }
      ]
    }

    option && myChart.setOption(option)
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style>
.el-tab-pane{
  padding-top:10px ;
  line-height: 35px;
  text-indent: 2em;
}
.underneath{
  display: flex;
  justify-content: space-evenly;
}
.leftCar{
  width: 50%;
  margin: 0 auto;
}
#bing{
  width: 50%;
  height: 500px;
   margin: 0 auto;
}
</style>
